<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <base href="<%=basePath %>"/>
 <title>购物车-合众饰品专卖</title>
 <meta name="keywords"  content="KEYWORDS..." />
 <meta name="description" content="DESCRIPTION..." />
 <meta name="author" content="HZIT" />
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name='apple-touch-fullscreen' content='yes'>
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="format-detection" content="telephone=no">
 <meta name="format-detection" content="address=no">
 <link rel="icon" href="../../images/icon/favicon.ico" type="image/x-icon">
 <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../images/icon/apple-touch-icon-57x57-precomposed.png">
 <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../images/icon/apple-touch-icon-120x120-precomposed.png">
 <link rel="apple-touch-icon-precomposed" sizes="196x196" href="../../images/icon/apple-touch-icon-196x196-precomposed.png">
 <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" type="text/css" href="../../css/style.css" />
 <script src="../../js/jquery.js"></script>
 <script>
  $(document).ready(function(){
   //show or hide:delBtn
   $(".edit").toggle(function(){
    $(this).parent().siblings("dd").find(".delBtn").fadeIn();
    $(this).html("完成");
    $(".numberWidget").show();
    $(".priceArea").hide();
   },function(){
    $(this).parent().siblings("dd").find(".delBtn").fadeOut();
    $(this).html("编辑");
    $(".numberWidget").hide();
    $(".priceArea").show();
   });
   //minus
   $(".minus").click(function(){
    var currNum=$(this).siblings(".number");  //先看class为number的文本框的值
    //如果值小于等于1
    if(currNum.val()<=1){
     $.post("updateCart", {goodsid: $(this).attr("title"), flag: "del"}, function (data) {
      $(".cart_icon em").html(data.totalcount);
      $("#price").html("总价格:￥:"+data.totalprice);
     });
     //删除元素
     $(this).parents("dd").remove();
     //提示购物车为空
     nullTips();

    }else {
     currNum.val(parseInt(currNum.val()) - 1);
     $.post("updateCart", {goodsid: $(this).attr("title"), flag: "-"}, function (data) {
      $(".cart_icon em").html(data.totalcount);
      $("#price").html("总价格:￥:"+data.totalprice);
     });
    }
   });
   //plus
   $(".plus").click(function(){
    var currNum=$(this).siblings(".number");
    currNum.val(parseInt(currNum.val())+1);
    $.post("updateCart", {goodsid: $(this).attr("title"), flag: "+"}, function (data) {
     $(".cart_icon em").html(data.totalcount);
     $("#price").html("总价格:￥:"+data.totalprice);
    });
   });
   //delBtn
   $(".delBtn").click(function(){
    $(this).parent().remove();
    nullTips();
    $.post("updateCart", {goodsid: $(this).attr("title"), flag: "del"}, function (data) {
     $(".cart_icon em").html(data.totalcount);
     $("#price").html("总价格:￥:"+data.totalprice);
    });
   });
   //isNull->tips
   function nullTips(){
    if($(".cart dd").length==0){
     var tipsCont="<mark style='display:block;background:none;text-align:center;color:grey;'>购物车为空！</mark>"
     $(".cart").remove();
     $("body").append(tipsCont);
    }
   }
  });
 </script>
</head>
<body>
<!--header-->
<header>
 <a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
 <h1>购物车</h1>
</header>
<dl class="cart">
 <c:set var="count" value="0"></c:set>
 <c:set var="totalprice" value="0"></c:set>
 <c:forEach items="${cart}" var="it">
  <c:set var="count" value="${count+it.value.count}"></c:set>
  <c:set var="totalprice" value="${totalprice+it.value.count*it.value.goodsinfo.goodsSellPrice}"></c:set>
  <dd>
   <a href="product.jsp" class="goodsPic"><img src="upload/image/${it.value.goodsinfo.goodsImage}"/></a>
   <div class="goodsInfor">
    <h2>
     <a href="product.jsp">${it.value.goodsinfo.goodsName}</a>
     <span>1</span>
    </h2>
    <div class="priceArea">
     <strong>${it.value.goodsinfo.goodsSellPrice}</strong>
     <del>${it.value.goodsinfo.goodsPrice}</del>
    </div>
    <div class="numberWidget">
     <input type="button" value="-" class="minus" title="${it.value.goodsinfo.goodsId}"/>
     <input type="text" value="${it.value.count}" disabled  class="number"/>
     <input type="button" value="+"  class="plus"  title="${it.value.goodsinfo.goodsId}"/>
    </div>
   </div>
   <a class="delBtn" title="${it.value.goodsinfo.goodsId}">删除</a>
  </dd>
 </c:forEach>
</dl>
<!--bottom nav-->
<div style="height:1rem;"></div>
<aside class="btmNav">
 <ul>
  <li><a class="cart_icon"><em>${count}</em></a></li>
  <li><a id="price">合计：￥${totalprice}</a></li>
  <li><a href="confirm_order.jsp">立即下单</a></li>
 </ul>
</aside>
</body>
</html>
